<template>
	<view>
		<view v-if="show" class="cu-list menu-avatar card-menu margin-top-xl margin-bottom-xl padding-bottom-xl shadow-lg radius">

			<view class="cu-form-group">
				<view class="text-gray title">文件名</view>
				<input placeholder="请输入文件名称" v-model="form.filename" name="input"></input>
			</view>
				<view class="cu-bar bg-white ">
					<view class="action text-grey">
						图片
					</view>
					<view class="action">
						1张
					</view>
				</view>
				<view class="cu-form-group border-bottom border-light">
					<view class="grid col-4 grid-square flex-sub" style="height: 150rpx;">
						<view class="bg-img" v-if="form.file">
							<image  :src="form.file" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="!form.file">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			<view class="mt-5 flex bg-white align-center px-3">
				<view style="flex:3;">
					<button class='cu-btn  round bg-gradual-blue padding  text-center shadow-blur py-4 font-lg block' @click="confirm">提交</button>
				</view>
				<view class="ml-1" style="flex:2;">
					<button class='cu-btn  round bg-orange padding  text-center shadow-blur py-4 font-lg block' @click="hideModel">取消</button>
				</view>
			</view>
		</view>
		<view class="flex flex-direction bg-white mx-2 margin-top-xl margin-bottom-xl shadow-lg">
			<view v-if="list.length===0">暂无照片素材{{list.length}}</view>
			<view class="flex " v-else v-for="(item,index) in list" :key="index">
				<view class="flex mb-1  py-1 mx-1 flex-direction align-start" style="width: 60%;">
					<view class="">
						id：{{item._id}}
					</view>
				</view>
				<view class="flex align-center">
					<view class="flex cu-tag round bg-orange">
						删除
					</view>
					<view class="flex cu-tag round bg-olive">
						修改
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				show: true,
				form: {
					file: '',
					filename: ''
				},
				tempFiles:''

			}
		},
		onLoad() {
			// 获取客服列表
			
		},
		methods: {
			DelImg(){
				this.form.file=''
			},
			ChooseImage() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.form.file = this.index===3?'./video.mp4':tempFilePaths[0]
						this.tempFiles = chooseImageRes.tempFiles
					}
				});
			},
			getList() {
				uniCloud.callFunction({
					name: 'wxAction',
					data: {
						action: 'file',
						params: {
							count:20,
							offset:0
						},
						options: 'filelist'
					}
				}).then(res => {
					if(res.success&&res.result.data.length>0){
						this.list=res.result.data
					}
				})
			},
			confirm() {
				// 组装数据
				let formData = {
					filename: this.form.filename || (this.tempFiles[0].name).split('.')[0],
					filelength: this.tempFiles[0].size
				}
				formData['content-type'] =this.tempFiles[0].type
				console.log(formData)
				console.log(this.form)
				console.log(this.description)
				// 获取token
				uniCloud.callFunction({
					name: 'wxAction',
					data: {
						action: 'getToken'
					}
				}).then(res => {
					if (res.success) {
						// 发送微信请求
						let access_token = res.result
						let url =
							`https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token=${access_token}`
						uni.uploadFile({
							url: url,
							filePath: this.form.file,
							name: 'file',
							formData: formData,
							success: (uploadFileRes) => {
								// 判断 是否成功
								console.log(uploadFileRes)
								if(JSON.parse(uploadFileRes.data).errcode){
									return uni.showToast({
										title: '出错啦',
										icon:'none'
									});
								}
								// if(uploadFileRes.statusCode===200){
								// 	// 上传到服务器后台
								// 	uniCloud.callFunction({
								// 		name:'wxAction',
								// 		data:{
								// 			action:'file',
								// 			options:'add',
								// 			params:JSON.parse(uploadFileRes.data)
								// 		}
								// 	}).then(addRes=>{
								// 		if(addRes.success){
								// 			uni.showToast({
								// 				title: '添加成功',
								// 				icon: 'none'
								// 			});
								// 			this.hideModel()
								// 			this.getList()
								// 		}
								// 	})
								// }
								// 得到数据 上传到后台服务器
							},
							fail: (err) => {
								console.log(err)
							}
						});
					}
				})
				this.options = ''
				this.show = false
			},
			
			openModel(type) {
				this.options = type
				this.form={
					file: '',
					filename: ''
				}
				this.show = true

			}
		}
	}
</script>

<style>

</style>
